Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it nowIntall Later
Intall Later
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it nowxxxxxxxxxx<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <input type="checkbox" role="switch" class="toggle" /><!-- <input type="checkbox" role="switch" class="toggle" checked /><input type="checkbox" role="switch" class="toggle" disabled /><input type="checkbox" role="switch" class="toggle" disabled checked /> --></body></html>@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);*,:after,:before { box-sizing: border-box; padding: 0; margin: 0;}body { display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; margin: 0; min-height: 100vh; font-size: 50px; gap: 0.25em;}.toggle { --color: #000; --color2: #fff; --time: 0.35s; --p00: -2.5em; --p01: -2.5em; --p02: -2.5em; --p03: -2.5em; --p04: -2.5em; --p05: -2.5em; --p06: -2.5em; --p07: -2.5em; --p08: -2.5em; --p09: -2.5em; --p10: -2.5em; --p11: -2.5em; --p12: -2.5em; --p13: -2.5em; --p14: -2.5em; --p15: -2.5em; --p16: -2.5em; --p17: -2.5em; --p18: -2.5em; --p19: -2.5em; color: var(--color); appearance: none; position: relative; font-size: 1em; box-sizing: content-box; height: 1em; width: 2.5em; border: max(1px, 0.05em) solid; background: linear-gradient(var(--color2) 0 0) calc(100% - 0.2em) 50% / 0.6em 0.6em, linear-gradient(var(--color) 0 0) var(--p00) 0.00em / 100% 0.06em, linear-gradient(var(--color) 0 0) var(--p01) 0.05em / 100% 0.06em, linear-gradient(var(--color) 0 0) var(--p02) 0.10em / 100% 0.06em, linear-gradient(var(--color) 0 0) var(--p03) 0.15em / 100% 0.06em, linear-gradient(var(--color) 0 0) var(--p04) 0.20em / 100% 0.06em, linear-gradient(var(--color) 0 0) var(--p05) 0.25em / 100% 0.06em, linear-gradient(var(--color) 0 0) var(--p06) 0.30em / 100% 0.06em, linear-gradient(var(--color) 0 0) var(--p07) 0.35em / 100% 0.06em, linear-gradient(var(--color) 0 0) var(--p08) 0.40em / 100% 0.06em, linear-gradient(var(--color) 0 0) var(--p09) 0.45em / 100% 0.06em, linear-gradient(var(--color) 0 0) var(--p10) 0.50em / 100% 0.06em, linear-gradient(var(--color) 0 0) var(--p11) 0.55em / 100% 0.06em, linear-gradient(var(--color) 0 0) var(--p12) 0.60em / 100% 0.06em, linear-gradient(var(--color) 0 0) var(--p13) 0.65em / 100% 0.06em, linear-gradient(var(--color) 0 0) var(--p14) 0.70em / 100% 0.06em, linear-gradient(var(--color) 0 0) var(--p15) 0.75em / 100% 0.06em, linear-gradient(var(--color) 0 0) var(--p16) 0.80em / 100% 0.06em, linear-gradient(var(--color) 0 0) var(--p17) 0.85em / 100% 0.06em, linear-gradient(var(--color) 0 0) var(--p18) 0.90em / 100% 0.06em, linear-gradient(var(--color) 0 0) var(--p19) 0.95em / 100% 0.06em, linear-gradient(var(--color) 0 0) 0.2em 50% / 0.6em 0.6em ; background-repeat: no-repeat; transition: --p00 var(--time) 0.00s linear, --p01 var(--time) 0.01s ease-in, --p02 var(--time) 0.02s ease-out, --p03 var(--time) 0.03s ease-in-out, --p04 var(--time) 0.04s ease, --p05 var(--time) 0.05s cubic-bezier(0.1, 0.7, 1, 0.1), --p06 var(--time) 0.06s linear, --p07 var(--time) 0.07s ease-in, --p08 var(--time) 0.08s ease-out, --p09 var(--time) 0.09s ease-in-out, --p10 var(--time) 0.10s ease, --p11 var(--time) 0.11s cubic-bezier(0.1, 0.7, 1, 0.1), --p12 var(--time) 0.12s linear, --p13 var(--time) 0.13s ease-in, --p14 var(--time) 0.14s ease-out, --p15 var(--time) 0.15s ease-in-out, --p16 var(--time) 0.16s ease, --p17 var(--time) 0.17s cubic-bezier(0.1, 0.7, 1, 0.1), --p18 var(--time) 0.18s linear, --p19 var(--time) 0.19s ease-in; &::before { content: ""; width: 0.6em; aspect-ratio: 1; position: absolute; top: 50%; left: 0.5em; background: #f000; transform: translate(-50%, -50%); box-sizing: border-box; border: max(1px, 0.05em) solid #0000; } &:checked { --p00: 0em; --p01: 0em; --p02: 0em; --p03: 0em; --p04: 0em; --p05: 0em; --p06: 0em; --p07: 0em; --p08: 0em; --p09: 0em; --p10: 0em; --p11: 0em; --p12: 0em; --p13: 0em; --p14: 0em; --p15: 0em; --p16: 0em; --p17: 0em; --p18: 0em; --p19: 0em; &::before { left: calc(100% - 0.5em); } } &[disabled] { opacity: 0.25; }}@media print { .toggle { &, &::before, &::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }}@media (prefers-reduced-motion) { .toggle { &, &::before, &::after { transition: none !important; animation: none !important; } }}@property --p00 { syntax: '<length>'; inherits: true; initial-value: 0px; }@property --p01 { syntax: '<length>'; inherits: true; initial-value: 0px; }@property --p02 { syntax: '<length>'; inherits: true; initial-value: 0px; }@property --p03 { syntax: '<length>'; inherits: true; initial-value: 0px; }@property --p04 { syntax: '<length>'; inherits: true; initial-value: 0px; }@property --p05 { syntax: '<length>'; inherits: true; initial-value: 0px; }@property --p06 { syntax: '<length>'; inherits: true; initial-value: 0px; }@property --p07 { syntax: '<length>'; inherits: true; initial-value: 0px; }@property --p08 { syntax: '<length>'; inherits: true; initial-value: 0px; }@property --p09 { syntax: '<length>'; inherits: true; initial-value: 0px; }@property --p10 { syntax: '<length>'; inherits: true; initial-value: 0px; }@property --p11 { syntax: '<length>'; inherits: true; initial-value: 0px; }@property --p12 { syntax: '<length>'; inherits: true; initial-value: 0px; }@property --p13 { syntax: '<length>'; inherits: true; initial-value: 0px; }@property --p14 { syntax: '<length>'; inherits: true; initial-value: 0px; }@property --p15 { syntax: '<length>'; inherits: true; initial-value: 0px; }@property --p16 { syntax: '<length>'; inherits: true; initial-value: 0px; }@property --p17 { syntax: '<length>'; inherits: true; initial-value: 0px; }@property --p18 { syntax: '<length>'; inherits: true; initial-value: 0px; }@property --p19 { syntax: '<length>'; inherits: true; initial-value: 0px; }xxxxxxxxxxconsole.log("Event Fired")